<template>
  <div id='taskAllocation'>
    <!--右上角按钮-->

    <div style='position:absolute;right:55px;top:12.5%;z-index: 99'>
      <div class='top_button_box'>
        <i style='margin-left:5px;color: white;font-size: 30px;opacity: 0.5;z-index: 98' @click='fullScreen'
           class='el-icon-full-screen'></i>
      </div>
    </div>

    <div id='entirety' style="background-image: url('/static/background/background.png');padding: 10px">

      <!--标题行-->
      <el-row :gutter='30'>
        <el-col :span='8'>
          <div id='top-row-button-box' style='margin-left: 30px'>
            <el-button type='primary' size='small' class='top_row_button' @click='upDateResults'>预测结果更新</el-button>
            <el-button type='primary' size='small' class='top_row_button'>资源调度更新</el-button>
            <el-button type='primary' size='small' class='top_row_button'>任务分配更新</el-button>
          </div>
        </el-col>
        <el-col :span='8'>
          <div class='title_row'>
            <div class='title_box'>
              <div class='title_box_text'>
                任务分配与资源调度平台
              </div>
              <div class='title_box_hr'></div>
            </div>
          </div>
        </el-col>
        <el-col :span='8'>
          <div class='top_row_text' style='float: right;margin-right: 80px'>
            <span>滚动播放：</span>
            <el-radio-group v-model='scrollValue' size='small' @change='scrollChange'>
              <el-radio-button label='开'></el-radio-button>
              <el-radio-button label='关'></el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <!-- card1 -->
      <el-card class='card1'>
        <div class='title_class' style='margin-top: -5px'>当前资源使用情况</div>

        <el-row :gutter='20'>
          <el-col :span='6'>
            <el-card class='card1-inner'>
              <div slot='header' class='clearfix'>
                <span>CPU使用率</span>
              </div>
              <div class='tableInnerCpu'>
                <div v-for='item in usageDataList2' :key='item.id' class='card1_inner_row'>
                  <el-row style='width:80%;margin-left: 15%'>
                    <el-col :span='12'>
                      <img class='card1_inner_img' :src="'/static/hostPerformance/' + item.cloudProvider + '.png'">
                      <span class='card1_inner_num' style='margin-left:5%'>{{ item.platformName }}: </span>
                    </el-col>
                    <el-col :span='12'>
                      <span class='card1_inner_num'>{{ item.cpuValue }}</span>
                      <span class='card1_inner_num'>/ </span>
                      <span class='card1_inner_num' style='color:#87CEFA;'> {{ item.cpuTotal }}</span>
                    </el-col>
                  </el-row>

                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span='6'>
            <el-card class='card1-inner'>
              <div slot='header' class='clearfix'>
                <span>内存使用率</span>
              </div>
              <div class='tableInnerMemory'>
                <div v-for='item in usageDataList2' :key='item.id' class='card1_inner_row'>
                  <el-row style='width:80%;margin-left: 10%'>
                    <el-col :span='12'>
                      <img class='card1_inner_img' :src="'/static/hostPerformance/' + item.cloudProvider + '.png'">
                      <span class='card1_inner_num' style='margin-left:5%;'>{{ item.platformName }}: </span>
                    </el-col>
                    <el-col :span='12'>
                      <span class='card1_inner_num'>{{ item.memValue }}</span>
                      <span class='card1_inner_num'>/ </span>
                      <span class='card1_inner_num' style='color:#87CEFA;'> {{ item.memTotal }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span='6'>
            <el-card class='card1-inner'>
              <div slot='header' class='clearfix'>
                <span>存储使用率</span>
              </div>
              <div class='tableInnerBandWidth'>
                <div v-for='item in usageDataList2' :key='item.id' class='card1_inner_row'>
                  <el-row style='width:90%;margin-left: 5%'>
                    <el-col :span='10'>
                      <img class='card1_inner_img' :src="'/static/hostPerformance/' + item.cloudProvider + '.png'">
                      <span class='card1_inner_num' style='margin-left:5%;'>{{ item.platformName }}: </span>
                    </el-col>
                    <el-col :span='14'>
                      <span class='card1_inner_num'>{{ item.storageValue }}</span>
                      <span class='card1_inner_num'>/ </span>
                      <span class='card1_inner_num' style='color:#87CEFA;'> {{ item.storageTotal }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span='6'>
            <el-card class='card1-inner'>
              <div slot='header' class='clearfix'>
                <span>带宽使用率</span>
              </div>
              <div class='tableInnerDisk'>
                <div v-for='item in usageDataList2' :key='item.id' class='card1_inner_row'>
                  <el-row style='width:80%;margin-left: 10%'>
                    <el-col :span='12'>
                      <img class='card1_inner_img' :src="'/static/hostPerformance/' + item.cloudProvider + '.png'">
                      <span class='card1_inner_num' style='margin-left:5%;'>{{ item.platformName }}: </span>
                    </el-col>
                    <el-col :span='12'>
                      <span class='card1_inner_num'>{{ item.bandwidthValue }}</span>
                      <span class='card1_inner_num'>/ </span>
                      <span class='card1_inner_num' style='color:#87CEFA;'> {{ item.bandwidthTotal }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <el-card class='card2'>
        <div class='title_class' style='margin-top: -5px'>云际平台未来费用预测</div>

        <el-row :gutter='20'>
          <el-col :span='6'>
            <el-row>
              <el-button style='float: right; padding: 3px 0' type='text' @click='jumpResourcePrediction'>详情</el-button>
            </el-row>
            <el-row>
              <div id='chart_real' style='height: 24vh;'></div>
            </el-row>
          </el-col>
          <el-col :span='6'>
            <el-card class='card2-inner'>
              <div slot='header' class='clearfix'>
                <!-- 1023修改 -->
                <span>低延迟</span>
                <!--     <el-button style="float: right; padding: 3px 0" type="text" @click='openDetailDialog(`shortTerm`)'>详情2</el-button>-->
                <!-- <el-button style='float: right; padding: 3px 0' type='text' @click='jumpConsult'>详情</el-button> -->
                <el-button style='float: right; padding: 3px 0;margin-right: 10px' type='text' :disabled='chooseBtnFlag'
                           v-if='false' @click='chooseSet(`shortTerm`)'>选择
                </el-button>
              </div>
              <div style='text-align: center;margin-top: 1vh'>
                <!-- <span class='card1_inner_num'>总费用</span>
                <span class='card1_inner_num'>${{ expenseLists.shortTermExpenseDetail.totalExpense }}</span> -->
              </div>
              <div class='card-chart-box'>
                <div id='short_term_chart' style='height: 24vh;'></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span='6'>
            <el-card class='card2-inner'>
              <div slot='header' class='clearfix'>
                <span>高算力</span>
                <el-button style='float: right; padding: 3px 0;margin-right: 10px' type='text' :disabled='chooseBtnFlag'
                           v-if='false' @click='chooseSet(`mediumTerm`)'>选择
                </el-button>
              </div>
              <div style='text-align: center;margin-top: 1vh'>
              </div>
              <div class='card-chart-box'>
                <div id='medium_term_chart' style='height: 22vh;margin-top: 5vh;'></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span='6'>
            <el-card class='card2-inner'>
              <div slot='header' class='clearfix'>
                <span>低能耗</span>
                <el-button style='float: right; padding: 3px 0;margin-right: 10px' type='text' :disabled='chooseBtnFlag'
                           v-if='false' @click='chooseSet(`longTerm`)'>选择
                </el-button>
              </div>
              <div class='card-chart-box'>
                <div id='long_term_chart' style='height: 20vh;margin-top: 5vh;'></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <el-card class='card3'>
        <div class='title_class' style='margin-top: -5px'>资源调度及任务分配结果</div>
        <div class='card3-box'>
          <div v-for='item in usageDataList' :key='item.id' class='card3-inner-box'>
            <el-card class='card3-inner'>
              <div slot='header' class='clearfix'>
                <img class='card3_inner_img' :src='item.icon'>
                <span>{{ item.label }}</span>
              </div>
              <div v-if='item.showAll'>
                <!-- 规格 -->
                <el-row style='width:90%;margin-left: 10%;margin-top: 2%' v-for='typeDetail in item.instanceTypes'
                        :key='detailKey'>
                  <el-col :span='6'>
                    <span class='card1_inner_num'>实例类型：</span>
                  </el-col>
                  <el-col :span='10'>
                    <span class='card1_inner_num' style='color:#87CEFA;'>{{ typeDetail.instanceTypeName }}</span>
                  </el-col>
                  <el-col :span='4'>
                    <span class='card1_inner_num'>数量</span>
                  </el-col>
                  <el-col :span='4'>
                    <span class='card1_inner_num' style='color:#87CEFA;'>{{ typeDetail.amount }}</span>
                  </el-col>
                  <el-col :span='6'>
                    <span class='card1_inner_num'>实例规格：</span>
                  </el-col>
                  <el-col :span='12'>
                    <span class='card1_inner_num' style='color:#87CEFA;'>{{ typeDetail.cpuCoreCount
                      }} 核 {{ typeDetail.memorySize }} GB  {{ typeDetail.arch }}</span>
                  </el-col>
                  <el-col :span='6'>
                    <el-button style='padding: 3px 0' type='text' @click='showInstanceTypeDetail(item, typeDetail)'>详情
                    </el-button>
                  </el-col>
                </el-row>
              </div>
              <!-- 规格实例 -->
              <div v-if='item.showInstanceTypeDetail' class='card3_detail_box'>
                <el-row class='card1_inner_num' style='margin-top: 2%'>
                  <el-col :span='24'>
                    <el-row>
                      <el-col :span='8'><span>实例类型</span></el-col>
                      <el-col :span='11'><span>{{ item.detail.instanceTypeName }}</span></el-col>
                      <el-col :span='5'>
                        <el-button style='padding: 3px 0' type='text' @click='quitDetail(item)'>退出详情</el-button>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span='8'><span>CPU</span></el-col>
                      <el-col :span='16'><span>{{ item.detail.cpuCoreCount }} 核</span></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span='8'><span>架构</span></el-col>
                      <el-col :span='16'><span>{{ item.detail.arch }}</span></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span='8'><span>内存</span></el-col>
                      <el-col :span='16'><span>{{ item.detail.memorySize }} GB</span></el-col>
                    </el-row>
                    <el-row v-if='item.detail.processorModel'>
                      <el-col :span='8'><span>处理器型号</span></el-col>
                      <el-col :span='16'><span>{{ item.detail.processorModel }}</span></el-col>
                    </el-row>
                    <el-row v-if='item.detail.gpuMemorySize != null && item.detail.gpuMemorySize !== 0'>
                      <el-col :span='8'><span>GPU</span></el-col>
                      <el-col :span='16'>
                        <span>{{ item.detail.gpuSpec }} × {{ item.detail.gpuAmount }} {{ item.detail.gpuMemorySize }} GB</span>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </div>
      </el-card>

      <!--折线图详情-->
      <el-dialog
        title='详情'
        :visible.sync='chartDialogVisible'
        width='40%'
      >
        <el-descriptions title='对象存储'>
          <el-descriptions-item label='存储量'>{{ expenseInDialog.objectStorage.storageCapacity }}</el-descriptions-item>
          <el-descriptions-item label='存储时长'>{{ expenseInDialog.objectStorage.storageDuration }}h</el-descriptions-item>
          <el-descriptions-item label='单价'>{{ expenseInDialog.objectStorage.unitPrice }}</el-descriptions-item>
          <el-descriptions-item label='总费用'>{{ expenseInDialog.objectStorage.cost }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title='数据传输'>
          <el-descriptions-item label='传输量'>{{ expenseInDialog.dataTransfer.transferCapacity }}</el-descriptions-item>
          <el-descriptions-item label='单价'>{{ expenseInDialog.dataTransfer.unitPrice }}</el-descriptions-item>
          <el-descriptions-item label='总费用'>{{ expenseInDialog.dataTransfer.cost }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title=' 数据库服务'>
          <el-descriptions-item label='数据库类型'>{{ expenseInDialog.databaseService.databaseType }}</el-descriptions-item>
          <el-descriptions-item label='存储量'>{{ expenseInDialog.databaseService.storageCapacity }}</el-descriptions-item>
          <el-descriptions-item label='使用时长'>{{ expenseInDialog.databaseService.duration }}h</el-descriptions-item>
          <el-descriptions-item label='单价'>{{ expenseInDialog.databaseService.unitPrice }}</el-descriptions-item>
          <el-descriptions-item label='总费用'>{{ expenseInDialog.databaseService.cost }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title=' 负载均衡'>
          <el-descriptions-item label='实例数'>{{ expenseInDialog.loadBalancer.instancesNum }}</el-descriptions-item>
          <el-descriptions-item label='使用时长'>{{ expenseInDialog.loadBalancer.duration }}h</el-descriptions-item>
          <el-descriptions-item label='单价'>{{ expenseInDialog.loadBalancer.unitPrice }}/h/实例</el-descriptions-item>
          <el-descriptions-item label='总费用'>{{ expenseInDialog.loadBalancer.cost }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title=' 总费用'>
          <el-descriptions-item label='对象存储'>{{ expenseInDialog.objectStorage.cost }}</el-descriptions-item>
          <el-descriptions-item label='数据传输'>{{ expenseInDialog.dataTransfer.cost }}</el-descriptions-item>
          <el-descriptions-item label='数据库服务'>{{ expenseInDialog.databaseService.cost }}</el-descriptions-item>
          <el-descriptions-item label='负载均衡'>{{ expenseInDialog.loadBalancer.cost }}</el-descriptions-item>
          <el-descriptions-item label='总计'>{{ expenseInDialog.totalExpense }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <div id='chartInDialog' style='margin:0px 20px 0px 20px;height: 30vh;width:80%'></div>
        <span slot='footer' class='dialog-footer'>

      </span>
      </el-dialog>


    </div>
  </div>
</template>

<script src='./js/index.js'>
</script>
<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import './css/taskAllocation.scss';
</style>
